<template>
  <teleport to="body">
    <!-- append to body -->
    <div class="preloader" v-show="visible">
      <div class="status" v-show="visible">
        <div class="spinner"></div>
      </div>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
export default defineComponent({
  name: "fo-loader",
  props: {
    visible: { type: Boolean, default: false },
  },
  setup() {
    const oVisible = computed(() => {
      return {};
    });
    return { oVisible };
  },
});
</script>

<style scoped lang="less">
// Ctrl+Shift+P -> settings.json -> "vetur.validation.style": false(缺点啥都不检测)
// 解决方案: https://stackoverflow.com/questions/61443484/how-to-solve-semi-colon-expected-csscss-semicolonexpected
.preloader {
  @apply fixed inset-0 bg-gray-100 z-9999;
  .status {
    @apply w-10 h-10 absolute top-1/2 left-1/2 -mt-5 -ml-5;
    .spinner {
      @apply w-20 h-20 absolute left-1/2 -mt-10 -ml-10;
      &::before {
        content: "";
        border-color: #655be6 rgba(101, 91, 230, 0.3);
        animation: loaderSpin 3.45s infinite;
        @apply absolute w-12 h-12 top-1/2 left-1/2 -mt-6 -ml-6;
        @apply border-t-2	border-b-2 border-l border-r border-solid rounded-3xl;
      }
      &:after {
        content: "";
        background-color: #655be6;
        animation: loaderPulse 6.9s infinite, loaderBorderPulse 6.9s infinite;
        @apply absolute w-4 h-4 top-1/2 left-1/2 -mt-2 -ml-2 rounded-lg;
      }
    }
  }
}
</style>
